<template>
  <div class="bigbox">
    <div class="top">
      <div class="tleft" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <div class="tcenter">{{ detail?.movie?.nm }}</div>
      <div class="tright"><van-icon name="wap-nav" /></div>
    </div>
    <div class="most">
      <div
        class="movbox"
        :style="{ 'background-image': `url(${detail?.movie?.img}` }"
      ></div>
      <div class="mvbox">
        <div class="mleft">
          <van-image
            width="110rem"
            height="150rem"
            fit="contain"
            :src="detail?.movie?.img"
          />
        </div>
        <div class="mright">
          <div class="nm">{{ detail?.movie?.nm }}</div>
          <div class="enm">{{ detail?.movie?.enm }}</div>
          <div class="sc">
            <p class="fen">{{ detail?.movie?.sc }}</p>
            <p class="num">({{ detail?.movie?.snum }}人评)</p>
          </div>
          <div class="dong">
            <div class="lei">
              {{ detail?.movie?.cat }}
            </div>
            <div class="jumu">
              {{ detail?.movie?.ver.slice(0, 7) }}
            </div>
          </div>
          <div class="where">
            <p class="dizhi">{{ detail?.movie?.src }}&nbsp;/</p>
            <p class="long">{{ detail?.movie?.episodeDur }}分钟</p>
          </div>
          <div class="time">
            <p class="nian">{{ detail?.movie?.onlineDate }}</p>
          </div>
        </div>
        <div
          class="mjian"
          @click="
            $router.push({
              path: '/caseinfoeditor',
              query: { id: detail?.movie?.id },
            })
          "
        >
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="date">
      <van-tabs v-model:active="activeName">
        <van-tab
          :title="`今天 ` + tdd"
          name="a"
        >
          <div class="today">
            <JinTian
              v-for="(ttail, ttailindex) in todaydetail.cinemas"
              :key="ttailindex"
              :ttail="ttail" @click="dianjin(htail),$router.push({ path: '/Cindetails',query:{id:ttail.id}})"
              ></JinTian
            >
          </div>
        </van-tab>
        <van-tab
          :title="`明天 ` + ttt"
          name="b"
        >
          <div class="today">
            <MingTian
              v-for="(mtail, mtailindex) in mingdetail.cinemas"
              :key="mtailindex"
              :mtail="mtail" @click="dianjim(htail),$router.push({ path: '/Cindetails',query:{id:mtail.id}})"
              >{{ mtail?.cityId }}</MingTian
            >
          </div>
        </van-tab>
        <van-tab
          :title="`后天  ` + thh"
          name="c"
        >
        <!-- ,$router.push({ path: '/Cindetails',query:{id:htail.cinemaId}})" -->
          <div class="today">
            <HouTian
              v-for="(htail, htailindex) in houdetail.cinemas"
              :key="htailindex"
              :htail="htail"
              @click="dianji(htail),$router.push({ path: '/Cindetails',query:{id:htail.id}})"
              >{{ htail?.cityId }}</HouTian
            >
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import JinTian from "../gongneng/JinTian.vue";
import MingTian from "../gongneng/MingTian.vue";
import HouTian from "../gongneng/HouTian.vue";
import { useRoute } from "vue-router";
import axios from "@/api/axios.js";
import { ref } from "vue";
const route = useRoute();

const gettime = ref([]);
const gettt = ref([]);
const gethh = ref([]);
const tdd = ref([]);
const ttt = ref([]);
const thh = ref([]);
const getCurrentTime = () => {
  //获取当前时间并打印
  const yy = new Date().getFullYear();
  const mm = new Date().getMonth() + 1;
  const dd = new Date().getDate();
  const tt = new Date().getDate() + 1;
  const hh = new Date().getDate() + 2;
  gettime.value = yy + "-0" + mm + "-" + dd;
  tdd.value = "0" + mm + "月" + dd + "日";
  ttt.value = "0" + mm + "月" + tt + "日";
  thh.value = "0" + mm + "月" + hh + "日";
  gettt.value = yy + "-0" + mm + "-" + tt;
  gethh.value = yy + "-0" + mm + "-" + hh;
  // console.log(gettime);
};

getCurrentTime();

const dianjin=(ttail)=>{
  // console.log(ttail?.id);
}
const dianjim=(mtail)=>{
  // console.log(mtail?.id);
}
const dianji=(htail)=>{
  // console.log(htail?.id);
}

const myData = localStorage.getItem("cityId") || "default value";
// console.log(myData);
const cityName = localStorage.getItem("cityName") || "default value";
// console.log(cityName);

var moviesid = ref(`${route.query.id}`);
const getDetail = () =>
  axios.get(
    "https://apis.netstart.cn/maoyan/movie/detail?movieId=" + moviesid.value
  );
const detail = ref([]);
async function update() {
  const { data } = await getDetail();
  detail.value = data;
  // console.log("电影detail", detail);
}
update();
const getDetailt = () =>
  axios.get(
    `https://m.maoyan.com/api/mtrade/mmcs/cinema/v2/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&movieId=${moviesid.value}&sort=distance&cityId=${myData}&ci=20&lat=23.452935&lng=113.270988&districtId=-1&lineId=-1&areaId=-1&stationId=-1&showDate=` +
      gettime.value
  );
const todaydetail = ref([]);
async function updates() {
  const { data } = await getDetailt();
  todaydetail.value = data.data;
  // console.log(tail);
  // console.log("电影todaydetail", todaydetail);
}
updates();
const getDetailtt = () =>
  axios.get(
    `https://m.maoyan.com/api/mtrade/mmcs/cinema/v2/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&movieId=${moviesid.value}&sort=distance&cityId=${myData}&ci=20&lat=23.452935&lng=113.270988&districtId=-1&lineId=-1&areaId=-1&stationId=-1&showDate=` +
      gettt.value
  );
const mingdetail = ref([]);
async function updatess() {
  const { data } = await getDetailtt();
  mingdetail.value = data.data;
  // console.log(tail);
  // console.log("电影mingdetail", mingdetail);
}
updatess();
const getDetailttt = () =>
  axios.get(
    `https://m.maoyan.com/api/mtrade/mmcs/cinema/v2/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&movieId=${moviesid.value}&sort=distance&cityId=${myData}&ci=20&lat=23.452935&lng=113.270988&districtId=-1&lineId=-1&areaId=-1&stationId=-1&showDate=` +
      gethh.value
  );
const houdetail = ref([]);
async function updatesss() {
  const { data } = await getDetailttt();
  houdetail.value = data.data;
  // console.log(tail);
  // console.log("电影houdetail", houdetail);
}
updatesss();

const activeName = ref("a");
</script>

<style lang="scss" scoped>
.bigbox {
  .top {
    width: 100vw;
    height: 7.3vh;
    line-height: 7.3vh;
    font-size: 17rem;
    background-color: #e54848;
    color: #fff;
    display: flex;
    z-index: 99;
    justify-content: space-between;
  }
  .most {
    position: relative;
    .movbox {
      width: 100vw;
      height: 195rem;
      padding: 15rem;
      overflow: hidden;
      // margin-top: 8vh;
      display: flex;
      background: no-repeat;
      filter: blur(15px);
      // backdrop-filter: blur(5px);
      background-position: -32rem -473rem;
    }
    .mvbox {
      display: flex;
      position: absolute;
      top: 15rem;
      left: 10rem;
      .mright {
        margin-left: 10rem;
        .nm {
          width: 180rem;
          font-weight: 700;
          font-size: 20rem;
          color: #fff;
          margin-bottom: 5rem;
          overflow: hidden; // 溢出隐藏
          white-space: nowrap; // 强制一行
          text-overflow: ellipsis; // 文字溢出显示省略号
        }
        .enm {
          width: 180rem;
          font-size: 13rem;
          color: #fff;
          margin-bottom: 5rem;
          overflow: hidden; // 溢出隐藏
          white-space: nowrap; // 强制一行
          text-overflow: ellipsis; // 文字溢出显示省略号
        }
        .sc {
          display: flex;
          .fen {
            color: #ffcc00;
            font-weight: bold;
            font-size: 17rem;
          }
          .num {
            color: #fff;
            line-height: 25rem;
          }
        }
        .dong {
          display: flex;
          .lei {
            color: #f4f4f4;
          }
          .jumu {
            color: #f4f4f4;
            padding: 3rem 4rem;
            font-size: 12rem;
            transform: scale(0.6);
            border: 1rem solid #f4f4f4;
          }
        }
        .where {
          display: flex;
          font-weight: 700;
          color: #f4f4f4;
          margin: 5rem 0;
        }
        .time {
          color: #f4f4f4;
          font-weight: 500;
        }
      }
      .mjian {
        margin: auto 0;
        margin-left: 40rem;
        i {
          font-size: 20rem;
          color: #ccc;
        }
      }
    }
  }
}
</style>
